<!DOCTYPE html>
<html>

<head>
    <!-- Site made with Mobirise Website Builder v5.2.0, https://mobirise.com -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="generator" content="Mobirise v5.2.0, mobirise.com">
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:image:src" content="assets/images/index-meta.jpg">
    <meta property="og:image" content="assets/images/index-meta.jpg">
    <meta name="twitter:title" content="Phantoms">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <link rel="shortcut icon" href="https://img.picgo.net/2024/10/18/frame-1-121x121bc5d878c1dd0d5fc.png"
          onerror="this.onerror=null;this.src='./assets/images/frame-1-121x121.png';"
          type="image/x-icon">
    <meta name="description" content="FF14、FC/CWLS Phantomsのホームページです。">


    <title>Phantoms</title>
    <link rel="stylesheet" href="assets/web/assets/mobirise-icons2/mobirise2.css">
    <link rel="stylesheet" href="assets/tether/tether.min.css">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="assets/dropdown/css/style.css">
    <link rel="stylesheet" href="assets/socicon/css/styles.css">
    <link rel="stylesheet" href="assets/theme/css/style.css">
    <link rel="preload" as="style" href="assets/mobirise/css/mbr-additional.css">
    <link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">

    <!--  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">-->
    <link rel="stylesheet" href="assets/web/assets/fontawesome.css">
    <link rel="stylesheet" href="vedio/play_vedio.css">
    <link rel="stylesheet" href="additions/mouse.css">

    <!--load scripts first in index & history-->
    <script src="assets/web/assets/jquery/jquery.min.js">
    </script>
    <script src="assets/popper/popper.min.js">
    </script>
    <script src="assets/tether/tether.min.js">
    </script>
    <script src="assets/bootstrap/js/bootstrap.min.js">
    </script>
    <script src="assets/smoothscroll/smooth-scroll.js">
    </script>
    <script src="assets/ytplayer/jquery.mb.ytplayer.min.js">
    </script>
    <script src="assets/vimeoplayer/jquery.mb.vimeo_player.js">
    </script>
    <script src="assets/dropdown/js/nav-dropdown.js">
    </script>
    <script src="assets/dropdown/js/navbar-dropdown.js">
    </script>
    <script src="assets/touchswipe/jquery.touch-swipe.min.js">
    </script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            color: #333;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .language-controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin: 20px 0;
        }

        .lang-btn {
            padding: 8px 20px;
            background: rgba(255, 255, 255, 0.15);
            color: #000000;
            border: 1px solid rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .lang-btn:hover {
            background: rgba(255, 255, 255, 0.25);
        }

        .lang-btn.active {
            background: rgba(255, 255, 255, 0.35);
            font-weight: bold;
        }

        .content-wrapper {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .card {
            background: white;
            padding: 25px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            width: 900px;
            max-width: 90%; /* 在小屏幕上保持响应式 */
            margin: 0 auto; /* 水平居中 */
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
        }

        .card-title {
            font-size: 1.5rem;
            color: #1c1c1c;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eaeaea;
        }

        .content-item {
            margin-bottom: 20px;
        }

        .content-item:last-child {
            margin-bottom: 0;
        }

        .chinese-text {
            font-size: 1.1rem;
            color: #333;
            margin-bottom: 5px;
        }

        .foreign-text {
            font-size: 0.7rem;
            color: #666;
            padding-left: 15px;
            margin-bottom: 10px;
            border-left: 2px solid #eaeaea;
        }

        .english-text {
            color: #1a274b;
        }

        .japanese-text {
            color: #5b1d1d;
        }

        .footer {
            text-align: center;
            margin-top: 40px;
            color: #2c2c2c;
            font-size: 0.9rem;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }

            .card {
                padding: 20px;
            }

            .language-controls {
                flex-wrap: wrap;
            }
        }
    </style>
</head>



<body>

<div id="menu"></div>
<script src="./assets/web/assets/jquery/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#menu").load("./additions/menu/menu1.html", function() {
            adjustLinks();
            window.addEventListener('resize', adjustLinks);
        });
    });
</script>


<!--<section class="header1 cid-s48MCQYojq mbr-fullscreen" id="header1-logo">-->
<!--&lt;!&ndash;section class="header1 cid-s48MCQYojq mbr-fullscreen" data-bg-video="https://youtu.be/AF2NrrJB8zA" id="header1-f"&ndash;&gt;-->
<!--    <div class="mbr-overlay" style="opacity: 1; background-color: rgb(255, 255, 255);">-->
<!--        <img class="mbr-overlay" src="assets/images/logo.jpg" style="width: 100%; height: 100%; max-width: 100%; object-fit: contain; opacity: 1">-->
<!--    </div>-->
<!--</section>-->

<!--
<iframe src="additions/wave.html" frameborder="hide" style="width: 100%; height: 100%; max-width: 100%; object-fit: contain; opacity: 1"></iframe>
<iframe src="additions/nest.html" frameborder="hide" style="width: 100%; height: 100%; max-width: 100%; object-fit: contain; opacity: 1"></iframe>
-->



<!--<section class="image3 cid-seogusrmXz" id="header1-f" >-->
<section class="header1 cid-s48MCQYojq mbr-fullscreen" id="header1-f" >
    <div class="card-img-overlay" style="opacity:1; background-color: rgb(255, 255, 255);">
        <iframe src="additions/nest.html" frameborder="hide" style="width: 100%; height: 100%; max-width: 100%; object-fit: contain; opacity: 1"></iframe>
    </div>
    <div class="mbr-overlay" style="opacity:0.15; background-color: rgb(255, 255, 255);">
        <img class="mbr-overlay" src="https://img.picgo.net/2024/10/18/WC5b11e591b8ba45e6.png"
             onerror="this.onerror=null;this.src='./assets/images/WC.PNG';"
             style="width: 100%; height: 100%; max-height: 100%; object-fit: cover; opacity: 1">
    </div>
    <div class="align-center container-fluid">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-8">

                <div class="container">
                    <div class="row justify-content-center">
                        <div class="image-wrapper">
                            <a>
                                <img src="https://img.picgo.net/2024/10/18/LOGO-LETTERa6cb5b7b70b44ad5.png"
                                     onerror="this.onerror=null;this.src='./assets/images/LOGO-LETTER.png';"
                                     style="max-width: 512px; align:center; padding:20px 0">
                            </a>
                        </div>
                    </div>
                </div>
<!--                <h1 class="mbr-section-title mbr-fonts-style mb-3 display-1">-->
<!--                    <strong>Phantoms</strong></h1>-->
                <p class="mbr-text mbr-fonts-style display-7">Freecompany and Cross-world Linkshell</p>
                <div class="mbr-section-btn mt-3"><a class="btn btn-primary display-4" href="index.html#features14-t">More</a></div>
            </div>
        </div>
    </div>
</section>


<section class="image3 cid-seogusrmXz" id="logo">
    <div class="container">
        <div class="row justify-content-center">
            <div class="image-wrapper">
<!--                    <a href="index.html#features14-t" target="_blank">-->
                <a>
                    <img src="https://img.picgo.net/2024/10/18/logo61cde29f5830c174.jpg"
                         onerror="this.onerror=null;this.src='./assets/images/logo.jpg';"
                         style="width: 100%; align:center; padding:20px 0; ">
                </a>
                <p class="mbr-description mbr-fonts-style mt-2 align-center display-4">Logo of FC</p>
            </div>
        </div>
    </div>
</section>


<div id="videoContainer" style="display: none; position: fixed; top: 55%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 80%; height: 80%; background: rgba(0,0,0,0.8);">
    <iframe id="myVideo" src="" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"
            style="width: 100%; height: 100%; object-fit: contain;"></iframe>
    <!--                            <video id="myVideo" controls>-->
    <!--                                <source src="./vedio/vedio.mp4" type="video/mp4">-->
    <!--                            </video>-->
    <a id="closeVideo" class="btn btn-black display-4" style="position: absolute; top: 70px; right: 10px; color: #fff;">Close</a>
</div>
<section class="image3 cid-seogusrmXz" id="image3-logo">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10">
                <div class="image-wrapper">
<!--                    <a href="index.html#features14-t" target="_blank">-->
                    <a>
                        <!--        style="width: 100%; height: 500px; max-width: 100%; align:center; padding:20px 0;"-->
                        <!--        <video autoplay muted loop style="width: 100%; height: 100%; object-fit: contain">-->
<!--                        <video autoplay muted loop style="width: 100%; max-width: 100%; align:center; padding:20px 0;">-->
<!--                            <source src="vedio/vedio.mp4" type="video/mp4">-->
<!--                        </video>-->
                        <div class="form-button-wrapper">
                            <button id="playVideo" class="btn-black" style="width: 100%; height: 100%; max-width: 100%; object-fit: contain; opacity: 1;">
                                <p class="mbr-description mbr-fonts-style mt-2 align-center display-4">Demonstration</p>
                                <h3 class="align-center mb-3 mbr-fonts-style display-2"><strong>Play Video</strong></h3>
                            </button>
                        </div>

                        <script type="text/javascript">
                            document.getElementById('playVideo').addEventListener('mouseover', function() {
                                this.style.transform = 'scale(1.1)';
                            });
                            document.getElementById('playVideo').addEventListener('mouseout', function() {
                                this.style.transform = 'scale(1)';
                            });
                            document.getElementById('playVideo').addEventListener('click', function() {
                                var iframe = document.getElementById('myVideo');
                                iframe.src = '//player.bilibili.com/player.html?isOutside=true&aid=114053359867102&bvid=BV1zsADezEbN&cid=28541192398&p=1';
                                //iframe.src = '//player.bilibili.com/player.html?isOutside=true&aid=112932809740147&bvid=BV1cKYueqE5Z&cid=500001644042391&p=1';
                                document.getElementById('videoContainer').style.display = 'flex';
                            });
                            document.getElementById('closeVideo').addEventListener('click', function() {
                                var iframe = document.getElementById('myVideo');
                                iframe.src = ''; // Clear the src to stop the video
                                document.getElementById('videoContainer').style.display = 'none';
                            });
                        </script>

<!--                        <video id="myVideo_avi" controls>-->
<!--                            <source src="./vedio/vedio.avi" type="video/x-msvideo">-->
<!--                        </video>-->


<!--                        <video id="myVideo_mov" controls>-->
<!--                            <source src="./vedio/vedio.mov" type="video/quicktime">-->
<!--                        </video>-->
                    </a>
<!--                    <p class="mbr-description mbr-fonts-style mt-2 align-center display-4">Demonstration</p>-->
                </div>
            </div>
        </div>
    </div>
</section>


<section class="image3 cid-seogusrmXz" id="image3-z">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10">
<!--                <div class="container">-->
<!--                    <div class="row justify-content-center">-->
<!--                        <div class="image-wrapper">-->
<!--                            <a href="index.html#features14-t" target="_blank">-->
<!--                                <img src="https://img.picgo.net/2024/10/18/FC-Card7560e3e54b2c639d.jpg"-->
<!--                                     onerror="this.onerror=null;this.src='./assets/images/FC-Card.jpg';"-->
<!--                                     style="max-width: 100%; align:center; padding:20px 0">-->
<!--                            </a>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
                <div class="image-wrapper" id="fcWrapper" style="position:relative; width:100%;">
                    <iframe id="fcFrame"
                            src="FC-Card.html"
                            scrolling="no"
                            frameborder="0"
                            style="display:block; width:100%; height:auto; min-height:320px;">
                    </iframe>
                </div>
                <script>
                    /* 监听来自 FC-Card.html 的消息（postMessage）*/
                    function resizeIframe(e) {
                        if (e.origin !== location.origin) return; // 安全校验
                        if (e.data && e.data.height) {
                            document.getElementById('fcFrame').style.height = e.data.height + 'px';
                        }
                    }
                    window.addEventListener('message', resizeIframe, false);
                </script>

                <div class="image-wrapper">
                    <p class="mbr-description mbr-fonts-style mt-2 align-center display-4">
                        Community Finder
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>



<section class="features13 cid-seeRGZBhsx" id="features14-t">
<!--    <div class="mbr-overlay" style="opacity:0.15; background-color: rgb(255, 255, 255);">-->
<!--        <img class="mbr-overlay" src="https://img.picgo.net/2024/10/18/WC5b11e591b8ba45e6.png" style="max-width: 100%; align:center; padding:20px 0;">-->
<!--    </div>-->
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h3 class="mbr-section-title align-center mb-4 mbr-fonts-style display-2"><strong>About FC/CWLS</strong></h3>
                <p class="mbr-section-title align-center">Phantom 部队风格与管理运营</p>
            </div>
            <div class="card col-12 col-md-4 col-lg-2 p-3">
                <div class="card-wrapper">
                    <div class="card-box align-center">
                        <span class="mbr-iconfont mobi-mbri-users mobi-mbri"></span>
                        <h4 class="card-title align-center mbr-black mbr-fonts-style display-7">
                            <strong>共同运营</strong></h4>
                        <strong>みんなで運営する</strong></h4>
                    </div>
                </div>
            </div>
            <div class="card p-3 col-12 col-md-4 col-lg-2">
                <div class="card-wrapper">
                    <div class="card-box align-center">
                        <span class="mbr-iconfont mobi-mbri-like mobi-mbri"></span>
                        <h4 class="card-title align-center mbr-black mbr-fonts-style display-7">
                            <strong>一起HAPPY</strong></h4>
                        <strong>楽しさを共有する</strong></h4>
                    </div>
                </div>
            </div>
            <div class="card p-3 col-12 col-md-4 col-lg-2">
                <div class="card-wrapper">
                    <div class="card-box align-center">
                        <span class="mbr-iconfont mobi-mbri-hearth mobi-mbri"></span>
                        <h4 class="card-title align-center mbr-black mbr-fonts-style display-7">
                            <strong>友善尊重</strong></h4>
                        <strong>強要しない</strong></h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <header>
            <div class="language-controls">
                <button class="lang-btn active" data-lang="all">全部语言</button>
                <button class="lang-btn" data-lang="chinese">CN</button>
                <button class="lang-btn" data-lang="english">EN</button>
                <button class="lang-btn" data-lang="japanese">JP</button>
            </div>
        </header>

        <div class="content-wrapper">
            <!-- 卡片1: 共同运营 -->
            <div class="card">
                <h2 class="card-title">共同运营 / Community Management / コミュニティ運営</h2>

                <div class="content-item" data-lang="all">
                    <div class="chinese-text">· 本部队氛围融洽，汇聚了众多热心的艾欧泽亚冒险者。</div>
                    <div class="foreign-text english-text">· Our Free Company boasts a harmonious atmosphere, filled with numerous helpful adventurers of Eorzea.</div>
                    <div class="foreign-text japanese-text">· 当フリーカンパニー（FC）には、熱心なエオルゼアの冒険者が多数在籍し、和やかな雰囲気が広がっています。</div>
                </div>

                <div class="content-item" data-lang="all">
                    <div class="chinese-text">· 主要讨论 FF14以及FF系列/联动IP/游戏内容/玩法机制/剧情/社群动态 等相关话题。</div>
                    <div class="foreign-text english-text">· Discussions primarily focus on FF14 game mechanics, storylines, worldview, and the in-game environment.</div>
                    <div class="foreign-text japanese-text">· FF14のゲームシステム、ストーリー、世界観、ゲーム環境などに関する議論が主な話題です。</div>
                </div>

                <div class="content-item" data-lang="all">
                    <div class="chinese-text">· 部队房装潢精美、设施齐全，公会设定详尽。部队箱免费提供多种收集品/消耗品。</div>
                    <div class="foreign-text english-text">· The FC estate is fully furnished and well-equipped, with detailed guild settings. The FC chest freely provides various minions, mounts, and consumables.</div>
                    <div class="foreign-text japanese-text">· FCハウスは設備が整い、装飾も充実。ギルドの設定も細やかで、FCチェストではさまざまなミニオン、マウント、消耗品を無料で提供しています。</div>
                </div>

                <div class="content-item" data-lang="all">
                    <div class="chinese-text">· 诚邀您一同参与 副本/宝物探索/垂钓 等丰富的团队活动。</div>
                    <div class="foreign-text english-text">· Join us for diverse group activities such as dungeon raids, treasure hunts, and deep-sea fishing.</div>
                    <div class="foreign-text japanese-text">· ダンジョン攻略、宝探し、釣りなど、様々なチーム活動を一緒に楽しみましょう。</div>
                </div>

                <div class="content-item" data-lang="all">
                    <div class="chinese-text">· 无论新老玩家，均可开诚布公，共同营造良好环境，一起建设一个更好的FC。</div>
                    <div class="foreign-text english-text">· Both new and experienced players are encouraged to communicate openly, working together to foster a positive environment and build a better FC.</div>
                    <div class="foreign-text japanese-text">· 新人ベテラン問わず、オープンに意見を交わし、良好な環境を共に築き、より良いFC作りにご参加ください。</div>
                </div>
            </div>

            <!-- 卡片2: 欢乐共游 -->
            <div class="card">
                <h2 class="card-title">一起Happy / Enjoy Together / 一緒に楽しむ</h2>

                <div class="content-item" data-lang="all">
                    <div class="chinese-text">· 欢迎随时在部队频道发起邀约！发送一句"玩点什么？"找朋友们一起娱乐!。</div>
                    <div class="foreign-text english-text">· Feel free to ask "What shall we do?" in the FC chat! Sure I will gladly invite you.</div>
                    <div class="foreign-text japanese-text">· FCチャットで「何かやることある？」と気軽に声をかけてみてください。もちろんご招待します！</div>
                </div>

                <div class="content-item" data-lang="all">
                    <div class="chinese-text">· 本部队不限制视频录制、直播或社交媒体截图分享，敬请自由享受游戏乐趣。</div>
                    <div class="foreign-text english-text">· The FC does not restrict video recording, live streaming, or sharing screenshots on social media. Please feel free to enjoy and share your experiences.</div>
                    <div class="foreign-text japanese-text">· 当FCでは、動画撮影、生配信、SNSへのスクリーンショット投稿など、自由に行っていただいて結構です。自由にゲームをお楽しみください。</div>
                </div>
            </div>

            <!-- 卡片3: 友善尊重 -->
            <div class="card">
                <h2 class="card-title">平和友善 相互尊重 / Friendliness & Respect / 親しみと尊重</h2>

                <div class="content-item" data-lang="all">
                    <div class="chinese-text">· 玩游戏开心第一！</div>
                    <div class="foreign-text english-text">· The ultimate goal is enjoyment.</div>
                    <div class="foreign-text japanese-text">· ゲームでは楽しむことが第一です。</div>
                </div>

                <div class="content-item" data-lang="all">
                    <div class="chinese-text">· 在MMORPG里，也请保持自我独立性，秉持互相尊重与换位思考的原则，勿将个人想法强加于人。</div>
                    <div class="foreign-text english-text">· Even in an MMORPG, please maintain your independence, practice mutual respect and empathy, and avoid imposing your views on others.</div>
                    <div class="foreign-text japanese-text">· MMORPGの中でも、自分らしさを保ち、互いを尊重し、立場を理解することを心がけ、自身の考えを相手に強要しないでください。</div>
                </div>

                <div class="content-item" data-lang="all">
                    <div class="chinese-text">· 请珍视友谊彼此信任，遇到观点分歧，遵循求同存异的和平共处方式。</div>
                    <div class="foreign-text english-text">· Cherish mutual trust. In case of differing opinions, adhere to the principle of "seeking common ground while reserving differences" for peaceful coexistence.</div>
                    <div class="foreign-text japanese-text">· 互いを大切に信頼し、意見が食い違った時は「共通点を求め、相違点を残す」という平和共存の原則に従いましょう。</div>
                </div>

                <div class="content-item" data-lang="all">
                    <div class="chinese-text">· 重视对方想法，尝试以请求或协助代替要求，理解彼此是避免强加于人的最佳方式。</div>
                    <div class="foreign-text english-text">· Value others' perspectives, and try requesting or assisting instead of demanding. Understanding each other is the best way to avoid coercion.</div>
                    <div class="foreign-text japanese-text">· 相手の考えを重視し、要求するのではなく、依頼や手助けを試みてください。相手を理解することが、強要を避ける最善の方法です。</div>
                </div>

                <div class="content-item" data-lang="all">
                    <div class="chinese-text">· 切勿因个人执念造成他人不快。在无压力的环境中共同游戏，才能收获最纯粹的快乐。</div>
                    <div class="foreign-text english-text">· Refrain from causing displeasure due to strong personal convictions. The best experiences come from playing together in a pressure-free and enjoyable atmosphere.</div>
                    <div class="foreign-text japanese-text">· 自身の信念を頑なに押し通して相手を不快にさせないように注意し、強要のないゲームの中で共に楽しむことが最も素晴らしいことです。</div>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>期待和各位一起创造美好经历</p>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const langButtons = document.querySelectorAll('.lang-btn');

            // 语言显示/隐藏函数
            function updateLanguageDisplay(selectedLang) {
                const contentItems = document.querySelectorAll('.content-item');

                contentItems.forEach(item => {
                    const chineseText = item.querySelector('.chinese-text');
                    const englishText = item.querySelector('.english-text');
                    const japaneseText = item.querySelector('.japanese-text');

                    // 重置所有显示状态
                    if (chineseText) chineseText.style.display = 'block';
                    if (englishText) englishText.style.display = 'block';
                    if (japaneseText) japaneseText.style.display = 'block';

                    // 根据选择的语言隐藏不需要的内容
                    switch(selectedLang) {
                        case 'chinese':
                            if (englishText) englishText.style.display = 'none';
                            if (japaneseText) japaneseText.style.display = 'none';
                            break;
                        case 'english':
                            if (chineseText) chineseText.style.display = 'none';
                            if (japaneseText) japaneseText.style.display = 'none';
                            break;
                        case 'japanese':
                            if (chineseText) chineseText.style.display = 'none';
                            if (englishText) englishText.style.display = 'none';
                            break;
                        // 'all' 情况下保持所有显示
                    }
                });
            }

            // 初始化 - 默认显示中文
            updateLanguageDisplay('chinese');

            // 设置中文按钮为默认激活状态
            const chineseBtn = document.querySelector('.lang-btn[data-lang="chinese"]');
            if (chineseBtn) {
                langButtons.forEach(btn => btn.classList.remove('active'));
                chineseBtn.classList.add('active');
            }

            // 按钮点击事件
            langButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 更新按钮状态
                    langButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');

                    const selectedLang = this.getAttribute('data-lang');
                    updateLanguageDisplay(selectedLang);
                });
            });
        });
    </script>
</section>

<section class="image3 cid-seogusrmXz">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10">
                <div class="image-wrapper">
                    <div class="form-button-wrapper">
                        <button id="vue-bottom" class="btn-black" onclick="redirectToVueProject()" style="width: 100%; height: 100%; max-width: 100%; object-fit: contain; opacity: 0.7;">
                            <p class="mbr-description mbr-fonts-style mt-2 align-center display-4">Go to Sub-Page</p>
                        </button>
                    </div>
                    <script>
                        document.getElementById('vue-bottom').addEventListener('mouseover', function() {
                            this.style.transform = 'scale(1.1)';
                        });
                        document.getElementById('vue-bottom').addEventListener('mouseout', function() {
                            this.style.transform = 'scale(1)';
                        });

                        function redirectToVueProject() {
                            const currentUrl = window.location.href;
                            let targetUrl;

                            if (currentUrl.includes('vercel.app')) {
                                targetUrl = 'https://ffxiv-phantoms-mainpage-vue.vercel.app/';
                            } else if (currentUrl.includes('onrender.com')) {
                                targetUrl = 'https://ffxiv-phantoms-mainpage-vue.onrender.com/';
                            } else if (currentUrl.includes('pages.dev')) {
                                targetUrl = 'https://ffxiv-phantoms-mainpage-vue.pages.dev/';
                            } else if (currentUrl.includes('github.io')) {
                                targetUrl = 'https://yukirinll.github.io/ffxiv_phantoms_mainpage_vue/';
                            } else {
                                targetUrl = 'https://phantoms2-3sriv0p6.maozi.io/'; // 默认跳转地址
                            }

                            window.location.href = targetUrl;
                        }
                    </script>
                </div>
            </div>
        </div>
    </div>
</section>

<!--<section class="content9 cid-seeQh9r2n0" id="messageBoard" >-->
<!--    <div class="mbr-overlay" style="opacity: 1; background-color: rgb(240,240,240);">-->
<!--    <div class="align-center container-fluid">-->
<!--        <iframe id="frame_content" src="messageBoard/readMessage.html" seamless frameborder=0 style="min-width: 100%; min-height: 600px; max-width: 100%; max-height: 100%; align:center; padding:20px 0; background-color: #ffffff;"></iframe>-->
<!--    </div>-->
<!--</section>-->
<!--<div class="align-center container-fluid">-->
<!--    <div class="row justify-content-center">-->
<!--        <div class="col-12 col-lg-8">-->

<!--            <p class="mbr-text mbr-fonts-style display-7">Comment Board</p>-->
<!--            <div class="mbr-section-btn mt-3"><a class="btn btn-primary display-4" href="messageBoard/messageBoard_formed.html">Comment</a></div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->


<section class="features13 cid-seeRGZBhsx" id="bgm">
    <!--    <div class="mbr-overlay" style="opacity:0.15; background-color: rgb(255, 255, 255);">-->
    <!--        <img class="mbr-overlay" src="assets/images/WC.PNG" style="max-width: 100%; align:center; padding:20px 0;">-->
    <!--    </div>-->
    <div class="container">
        <div class="row justify-content-center" style="opacity:1; background-color: rgb(255, 255, 255);">
            <audio src="./audio/BGM.mp3" autostart=”true” volume="0.3" loop controls="smallconsole"></audio>
<!--            <audio id="myAudio" src="https://cnlchrq5g6hen2t5llr0.baseapi.memfiredb.com/storage/v1/object/public/assets/audio/BGM.mp3" controls="smallconsole" autoplay loop></audio>-->
            <script>
                var audio = document.getElementById('myAudio');
                audio.volume = 0;
                var fadeIn;
                var userInteracted = false;

                document.addEventListener('click', function() {
                    userInteracted = true;
                });

                audio.addEventListener('play', function() {
                    if (userInteracted) {
                        fadeIn = setInterval(function() {
                            if (audio.volume < 0.40) {
                                audio.volume += 0.002;
                            } else {
                                clearInterval(fadeIn);
                            }
                        }, 100);
                    }
                });
                audio.addEventListener('pause', function() {
                    clearInterval(fadeIn);
                    audio.volume = 0;
                });
            </script>
            <div class="col-12 col-lg-10">
                <div class="image-wrapper">
                    <p class="mbr-description mbr-fonts-style mt-2 align-center display-4">プレリュード - Final Fantasy Vocal Collections II</p>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="share3 cid-seeJd7VvmR" id="share3-o">
    <div class="container">
        <div class="media-container-row">
            <div class="col-12">
                <h3 class="mbr-section-title align-center mb-3 mbr-fonts-style display-2"><strong>Social Link</strong></h3>
                <div class="social-list align-center">
                    <a class="iconfont-wrapper bg-success m-2" href="https://jq.qq.com/?_wv=1027&k=FSun33H0" target="_blank">
                        <span class="socicon-qq socicon" style="color: rgb(255, 255, 255); fill: rgb(255, 255, 255);"></span>
                    </a>
                    <a class="iconfont-wrapper bg-youtube m-2" href="https://weibo.com/5722698883/LnwkL1Fk2" target="_blank">
                        <span class="socicon-weibo socicon" style="color: rgb(255, 255, 255); fill: rgb(255, 255, 255);"></span>
                    </a>
                    <a class="iconfont-wrapper bg-twitch m-2" href="https://kaihei.co/Pz0Q4r" target="_blank">
                        <span class="socicon-discord socicon"></span>
                    </a>
                    <a class="iconfont-wrapper bg-info m-2" href="https://github.com/YukiRinLL/FFXIV_Phantoms_MainPage" target="_blank">
                        <span class="socicon-github socicon" style="color: rgb(255, 255, 255); fill: rgb(255, 255, 255);"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="footer7 cid-seeJHoNSny" once="footers" id="footer7-p">
    <div class="container">
        <div class="media-container-row align-center mbr-white">
            <div class="col-12">
                <p class="mbr-text mb-0 mbr-fonts-style display-7">Copyright (C) SQUARE ENIX CO., LTD. All Rights Reserved.<br>Copyright&nbsp;(C) Crystal Alliance cir. All Rights Reserved.
                </p>
            </div>
        </div>
    </div>
</section>

<section style="background-color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; color:#aaa; font-size:12px; padding: 0; align-items: center; display: flex;"><a href="https://mobirise.site/n" style="flex: 1 1; height: 3rem; padding-left: 1rem;"></a><p style="flex: 0 0 auto; margin:0; padding-right:1rem;">Page was <a href="https://mobirise.site/g" style="color:#aaa;">designed</a> with Mobirise</p></section>
    <script src="assets/theme/js/script.js">
    </script>

</body>


<footer>

<!--回到顶部按钮-->
<!--Yuki:20190724-->
<style>
    .box{
        position:fixed;
        right:20px;
        bottom: 380px;
        height:50px;
        width: 50px;
        text-align:center;
        padding-top:20px;
        background-color: black;
        border-radius: 20%;
        overflow: hidden;
    }.box:hover:before{
         top:50%
     }.box:hover .box-in{
          visibility: hidden;
      }.box:before{
           position: absolute;
           top: -50%;
           left: 50%;
           transform: translate(-50%,-50%);
           content:'TOP';
           width: 40px;
           color:white;
           font-weight:bold;
       }.box-in{
            visibility: visible;
            display:inline-block;
            height:20px;
            width: 20px;
            border: 3px solid black;
            border-color: white transparent transparent white;
            transform:rotate(45deg);
        }
</style>
<div id="box" class="box">
    <div class="box-in"></div>
</div>
<script>
    var timer  = null;
    box.onclick = function(){
        cancelAnimationFrame(timer);
        timer = requestAnimationFrame(
            function fn(){
                var oTop = document.body.scrollTop || document.documentElement.scrollTop;
                if(oTop > 0){
                    document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
                    timer = requestAnimationFrame(fn);
                }
                else{
                    cancelAnimationFrame(timer);
                }
            }
        );
    }
</script>

<!--更改网页标题-->
<!--Yuki:20190724-->
<title>标题</title>
<script>
    document.title = '(ノ￣▽￣) Phantoms !'
</script>
<!--网页标题(title)动态改变-->
<!--离开和回到当前页 网页标题改变-->
<script>
    window.onload = function () {
        var OriginTitile = document.title;
        var titleTime;
        document.addEventListener('visibilitychange', function () {
            if (document.hidden) {
                //$('[rel="shortcut icon"]').attr('href', "/Content/Images/fail.ico");
                document.title = '( * ￣▽￣)／肿么不看了呢？';
                clearTimeout(titleTime);
            }
            else {
                //$('[rel="shortcut icon"]').attr('href', "/Content/Images/icon.png");
                // document.title = '(～￣▽￣)～咦！又开始看了！' + OriginTitile;
                document.title = '(～￣▽￣)～咦！又开始看了！';
                titleTime = setTimeout(function () {
                    document.title = OriginTitile;
                }, 2000);
            }
        });
    }
</script>

<!--text click effect-->
<!--Yuki:20190724-->
<script type="text/javascript">
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array("Astral","Umbral","Arcanum","Polyglot","Transcendent","Material","Original","Xenogeneic","Etheral","Sin" ,"Missionary","Requiem","Clement","Cristal","Zodiac");
            var $i = $("<span></span>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
            });
            $("body").append($i);
            $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                1500,
                function() {
                    $i.remove();
                });
        });
    });
</script>

</footer>

<div id="foot"></div>
<script src="./assets/web/assets/jquery/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#foot").load("./additions/foot/profile-round.html");
    });
</script>
<!-- 引入访客统计模块 -->
<script src="visitor-tracker.js"></script>
<!-- Cloudflare Web Analytics -->
<script defer src='./lib/cloudflare/beacon.min.js' data-cf-beacon='{"token": "0e55e488041949479a3dace73ef940cd"}'>
</script>
<!-- End Cloudflare Web Analytics -->

</html>